﻿<head>
    <script src="~/lib/vue/dist/vue.global.js"></script>
    <link href="~/lib/element-plus/dist/index.css" rel="stylesheet" />
    <script src="~/lib/element-plus/dist/index.full.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="~/js/echarts.min.js"></script>
    <link href="~/css/table.css" rel="stylesheet" />
</head>
<div id="app">

    <table width="100%">
        <tr>
            <td>
                <p color="black">您正在做的业务是：人力资源--薪酬标准管理--薪酬发放登记</p>
            </td>
        </tr>
        <tr>
            <td colspan="2" style="text-align: right;">
                <input type="button" value="提交" v-on:click="check()" class="BUTTON_STYLE1">
                <input type="button" value="返回" class="BUTTON_STYLE1" v-on:click="goBack()">
            </td>
        </tr>
        <tr>
            <td colspan="2" style="text-align: left">
                薪酬单编号：{{SG.bh}}
                <input type="hidden" name="salaryGrant.salaryGrantId">
            </td>
        </tr>
        <tr>
            <td colspan="2" style="text-align: left">
                机构：
                {{Name}}


            </td>
        </tr>
        <tr>
            <td style="text-align: left">
                本机构总人数:{{SG.totalRecords}}
                <input type="hidden" name="salaryGrant.humanAmount" value="5">
                ，基本薪酬总数:{{formattedTotalSalarySum(SG.totalCost)}}$
                ，实发总额:<span id="salarySum_sum">{{formattedTotalSalarySum(SG.totalCostS)}}$</span>
            </td>
            <td style="text-align: right;">
                登记人:<input type="text" v-model="SG.Register" size="8" readonly="readonly">
                登记时间：<span id="Tdate"></span>
                <input type="hidden" name="salaryGrant.registTime" id="Tdate2">
            </td>
        </tr>
    </table>
    <el-table :data="tableData" :header-cell-style="{background:'#FFDB6F',color:'#606266'}">
        <el-table-column prop="hufId" label="序号"></el-table-column>
        <el-table-column prop="humanId" label="档案编号"></el-table-column>
        <el-table-column prop="humanName" label="姓名"></el-table-column>
        <el-table-column label="薪酬基本详细">
            <template #default="scope">
                <a v-on:click="handleClick(scope.row)">详细内容</a>
            </template>
        </el-table-column>
        <el-table-column label="奖励金额">
            <template #default="scope">
                <el-input type="text" v-model.number="scope.row.bounsSum" :value="scope.row.bounsSum === undefined? '0.00' : formattedTotalSalarySum(scope.row.bounsSum)" class="INPUT_STYLE2" v-on:input="updateSalary(scope.row)"  ></el-input>
            </template>
        </el-table-column>

        <el-table-column label="销售绩效总额">
            <template #default="scope">
                <el-input type="text" v-model.number="scope.row.saleSum" :value="scope.row.saleSum === undefined? '0.00' : formattedTotalSalarySum(scope.row.saleSum)" class="INPUT_STYLE2" v-on:input="updateSalary(scope.row)"  ></el-input>
            </template>
        </el-table-column>

        <el-table-column label="应扣金额">
            <template #default="scope">
                <el-input type="text" v-model.number="scope.row.deductSum" :value="scope.row.deductSum === undefined? '0.00' : formattedTotalSalarySum(scope.row.deductSum)" class="INPUT_STYLE2" v-on:input="updateSalary(scope.row)"  ></el-input>
            </template>
        </el-table-column>

        <el-table-column label="实发金额">
            <template #default="scope">
                <span v-if="scope.row.paidSalarySum==null">
                    <el-input type="text" v-model.number="scope.row.salarySum" class="INPUT_STYLE2" disabled>
                    </el-input>
                </span>
                <span v-if="scope.row.paidSalarySum!=null">
                    <el-input type="text" v-model.number="scope.row.paidSalarySum" class="INPUT_STYLE2" disabled>
                    </el-input>
                </span>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog v-model="dialogVisibleUp"
               title="薪酬基本详细"
               width="800">
        <div id="main" style="width: 800px;height:400px;" v-on:opened="initChart"></div>
    </el-dialog>
</div>

<script>
    var { createApp, reactive, ref } = Vue
    var app = createApp({
        setup() {
            let dialogVisibleUp = ref(false);

            const urlParams = new URLSearchParams(window.location.search);
            const rowData = JSON.parse(urlParams.get('rowData'));

            let tableData = ref([])
            let Name = ref("")
            let totalCost=ref(0)
            let totalCosts=ref(0)
            const SG = reactive({
                bh: "HF" + Math.floor(Math.random() * 9000000),
                FirstKindId: '',
                FirstKindName: '',
                SecondKindId: '',
                SecondKindName: '',
                ThirdKindId: '',
                ThirdKindName:'',
                totalRecords:'',
                totalCost: '',
                totalCostS: '',
                Register: ''
            })

            let xAxisData = ref([]);
            let seriesData = ref([]);

            var option = {
                tooltip: {},
                legend: {
                    data: ['金额']
                },
                xAxis: {
                },
                yAxis: {},
                series: [
                    {
                        name: '销量',
                        type: 'bar'
                    }
                ]
            }

            //打开el-dialog时初始化echarts实例
            function initChart() {
                const myChart = echarts.init(document.getElementById('main'));
                myChart.setOption(option);
            }

            function handleClick(row) {
                dialogVisibleUp.value = true;
                axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
                axios.post('/SelectSSDStandardId', { StandardId: row.salaryStandardId})
                    .then((res) => {
                        xAxisData.value = res.data.map(item => item.itemName);
                        seriesData.value = res.data.map(item => item.salary);
                        option.xAxis.data = xAxisData.value;
                        option.series[0].data = seriesData.value;
                        initChart();
                    })
            }
            //格式化金额
            function formattedTotalSalarySum(num) {
                return new Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(num);
            }

           function updateSalary(row) {
               // 在此处设置实发金额的计算逻辑  
               const bounsSum = row.bounsSum || 0; // 奖励金额  
               const saleSum = row.saleSum || 0; // 销售绩效总额  
               const deductSum = row.deductSum || 0; // 应扣金额  
               let salarySum = row.salarySum
                // 计算实发金额  
               row.paidSalarySum = salarySum + bounsSum + saleSum - deductSum;

                let zon=0;
               for (let i = 0; i < this.tableData.length;i++) {
                    if (this.tableData[i].paidSalarySum == null) {
                        zon += this.tableData[i].salarySum
                    } else {
                        zon += this.tableData[i].paidSalarySum
                    }
                  
               }
               SG.totalCostS = zon;

            }
            //提交时进行SGD SG表的新增 以及hf表的修改
            function check() {
                // 新增SG  
                axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";

                const addSGPromise = axios.post('/ADDSG', {
                    SalaryGrantId: SG.bh,
                    SalaryStandardId:111 ,
                    FirstKindId: SG.FirstKindId,
                    FirstKindName: SG.FirstKindName,
                    SecondKindId: SG.SecondKindId,
                    SecondKindName: SG.SecondKindName,
                    ThirdKindId: SG.ThirdKindId,
                    ThirdKindName: SG.ThirdKindName,
                    HumanAmount: SG.totalRecords,
                    SalaryStandardSum: SG.totalCost,
                    SalaryPaidSum: SG.totalCostS,
                    Register: SG.Register
                });

                // 创建保存所有HF状态修改和SGD新增的Promise数组  
                const updateHFStatusPromises = tableData.value.map(item => {
                    // 修改HF状态  
                    return axios.post('/SalaryAsync', {
                        humanId: item.humanId,
                        zt:2 
                    }).then(() => {
                        // 新增SGD
                        return axios.post('/ADDSGD', {
                            SalaryGrantId: SG.bh,
                            HumanId: item.humanId,
                            HumanName: item.humanName,
                            BounsSum: item.bounsSum,
                            SaleSum: item.saleSum,
                            DeductSum: item.deductSum,
                            SalaryStandardSum: item.salarySum,
                            SalaryPaidSum: item.paidSalarySum
                        });
                    });
                    
                });

                // 使用Promise.all确保所有请求成功  
                Promise.all([addSGPromise, ...updateHFStatusPromises])
                    .then(results => {
                        window.location.href = "/PayrollCheck/Index";
                    })
                    .catch(error => {
                        console.error('请求失败:', error);
                        // 请求中任意一个失败时的处理逻辑  
                    });
            }

            const fetchData = () => {
                //获取头部信息
                let totalRecord = 1
                for (let row of rowData) {
                    SG.FirstKindId = row.firstKindId;
                    SG.FirstKindName = row.firstKindName;
                    SG.SecondKindId = row.secondKindId;
                    SG.SecondKindName = row.secondKindName;
                    SG.ThirdKindId = row.thirdKindId;
                    SG.ThirdKindName = row.thirdKindName;
                    SG.totalRecords = totalRecord++;// rowData的长度
                    SG.totalCost = totalCost.value += row.salarySum;
                    SG.totalCostS = totalCosts.value += row.salarySum

                    if (row.secondKindName == null && row.thirdKindName == null) {
                        Name.value = row.firstKindName
                    }
                    if (row.secondKindName != null && row.thirdKindName == null) {
                        Name.value = row.secondKindName
                    }
                    if (row.thirdKindName != null) {
                        Name.value = row.thirdKindName
                    }
                }


                tableData.value = rowData;

                // 获取存储的res.data值
                const responseDataString = sessionStorage.getItem('User');
                if (responseDataString) {
                    // 将存储的字符串转换回数组
                    const responseDataArray = JSON.parse(responseDataString);

                    // 现在您可以访问responseDataArray数组中的元素
                    SG.Register = responseDataArray.uName;
                } else {
                    console.log("未找到存储的值");
                }
            };
            //自动生成时间
            function time() {
                var tdate = document.getElementById("Tdate");
                var d = new Date();
                var y = d.getFullYear();
                var moth = d.getMonth() + 1;
                var date = d.getDate();
                var h = d.getHours();
                var m = d.getMinutes();
                var s = d.getSeconds();
                var hh = 20 - 1 - h;
                var mm = 60 - 1 - m;
                var ss = 60 - s;
                if (hh > 0) {
                    mm = mm + 60 * hh;
                }
                if (moth < 10) {
                    moth = "0" + moth;
                }
                if (date < 10) {
                    date = "0" + date;
                }
                if (h < 10) {
                    h = "0" + h;
                }
                if (m < 10) {
                    m = "0" + m;
                }
                if (s < 10) {
                    s = "0" + s;
                }
                if (mm < 10) {
                    mm = "0" + mm;
                }
                if (ss < 10) {
                    ss = "0" + ss;
                }

                tdate.innerHTML = y + "-" + moth + "-" + date + " " + h + ":" + m + ":" + s;
                document.getElementById("Tdate2").value = tdate.innerHTML;
            }
            window.onload = time;
            var out = window.setInterval(time, 1000);
            //返回
            function goBack() {
                history.back();
            }
            fetchData();
            return {
                rowData,
                tableData,
                SG,
                Name,
                dialogVisibleUp,
                handleClick,
                option,
                xAxisData,
                seriesData,
                initChart,
                check,
                updateSalary,
                formattedTotalSalarySum,
                goBack
            }
        }
    })
    app.use(ElementPlus)
    app.mount("#app");

</script>

<style>
    .table {
        width: 100%;
        border-collapse: collapse;
    }

        .table th,
        .table td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }

        .table th {
            background-color: #4CAF50;
            color: white;
        }
</style>
<style type="text/css">
    body {
        background-color: #FFFFBB;
        border: 1px solid #FFDB6F;
        display: block;
        margin: 8px;
    }

</style>
